<!--弹出框-->
<template>
  <el-dialog
    :visible.sync="dialogVisible"
    center
    width="600px"
    @close="offDialog"
  >
    <div class="dialog_content">
      <div class="dialog_title">
        {{ type === 2 ? "修改商品数据" : "新增商品数据" }}
      </div>

      <el-form
        ref="dialogFrom"
        :label-width="formLabelWidth"
        :model="formDate"
        :rules="dialogRules"
      >
        <el-form-item label="日期：" prop="updateTime">
          <el-date-picker
            v-model="formDate.updateTime"
            placeholder="选择日期时间"
            type="datetime"
            value-format="yyyy-MM-dd HH:mm:ss"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item
          :label-width="formLabelWidth"
          label="商品名称："
          prop="productName"
        >
          <el-select v-model="formDate.productName">
            <el-option
              label="娃哈哈矿物质水"
              value="娃哈哈矿物质水"
            ></el-option>
            <el-option label="水中贵族" value="水中贵族"></el-option>
            <el-option label="空桶" value="空桶"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="图标：" prop="icon">
          <el-image
            :src="
              formDate.productName === '娃哈哈矿物质水'
                ? images[0]
                : formDate.productName === '水中贵族'
                ? images[1]
                : images[2]
            "
            class="product_img"
            fit="fill"
            lazy
          ></el-image>
        </el-form-item>
        <el-form-item
          :label-width="formLabelWidth"
          label="商品类型："
          prop="type"
        >
          <el-select v-model="formDate.type">
            <el-option label="桶装水" value="桶装水"></el-option>
            <el-option label="矿泉水" value="矿泉水"></el-option>
            <el-option label="空桶" value="空桶"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          :label-width="formLabelWidth"
          label="销售价(元)："
          prop="salesPrice"
        >
          <div class="dialog_input">
            <el-input
              v-model.number="formDate.salesPrice"
              clearable
              placeholder="请输入销售价"
            ></el-input>
          </div>
        </el-form-item>
        <el-form-item
          :label-width="formLabelWidth"
          label="销售价(元)："
          prop="purchasePrice"
        >
          <div class="dialog_input">
            <el-input
              v-model.number="formDate.purchasePrice"
              clearable
              placeholder="请输入进货价"
            ></el-input>
          </div>
        </el-form-item>
        <el-form-item
          :label-width="formLabelWidth"
          label="是否回收空桶："
          prop="drumsEmpty"
        >
          <el-radio-group v-model="formDate.drumsEmpty">
            <el-radio :label="false">否</el-radio>
            <el-radio :label="true">是</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item
          :label-width="formLabelWidth"
          label="是否需要押金："
          prop="cashPledge"
        >
          <el-radio-group v-model="formDate.cashPledge">
            <el-radio :label="false">否</el-radio>
            <el-radio :label="true">是</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item
          :label-width="formLabelWidth"
          label="状态："
          prop="status"
        >
          <el-switch
            v-model="formDate.status"
            active-color="#13ce66"
            inactive-color="#ff4949"
          >
          </el-switch>
          <span class="operation_btn">
            {{ formDate.status ? "启用" : "未启用" }}
          </span>
        </el-form-item>
      </el-form>
    </div>
    <div class="dialog_footer">
      <el-button v-if="type === 1" type="primary" @click="dialogAdd"
        >确 定</el-button
      >
      <el-button v-if="type === 2" type="primary" @click="dialogUpdate"
        >确 定</el-button
      >
      <el-button @click="offDialog">取 消</el-button>
    </div>
  </el-dialog>
  <!--     弹出框弹出框-->
</template>
<script>
export default {
  props: {
    // 表单数据
    dialogDate: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      formLabelWidth: "120px", // 表单文字宽度
      dialogVisible: false, // 弹窗控制变量
      type: 0, // 判断是新增还是修改,1 表示新增，2 表示修改
      // 图片数据
      images: [
        "https://qny.samt.top/3ukysgdRM9PP43ET.jpg",
        "https://qny.samt.top/2SN2472MG0wpji.jpg",
        'https://qny.samt.top/2SN2472MG0wpji.jpg',
      ],
      // 校验表单
      dialogRules: {
        updateTime: [
          {
            required: true,
            message: "请选择日期",
            trigger: "change",
          },
        ],
        productName: [
          {
            required: true,
            message: "请输入商品名称",
            trigger: "blur",
          },
        ],
        type: [
          {
            required: true,
            message: "请输入商品类型",
            trigger: "blur",
          },
        ],
        salesPrice: [
          { required: true, message: "请输入商品销售价", trigger: "blur" },
          { type: "number", message: "商品销售价必须是数字", trigger: "blur" },
        ],
        purchasePrice: [
          { required: true, message: "请输入商品进货价", trigger: "blur" },
          { type: "number", message: "商品进货价必须是数字", trigger: "blur" },
        ],
      },
      formDate: {
        id: new Date().getTime(),
        updateTime: "",
        productName: "娃哈哈矿物质水",
        icon: "https://qny.samt.top/2SN2472MG0wpji.jpg",
        type: "桶装水",
        salesPrice: 0,
        purchasePrice: 0,
        drumsEmpty: true,
        cashPledge: true,
        status: false,
      },
    };
  },
  watch: {
    dialogDate() {
      this.$nextTick(() => {
        this.formDate = this.dialogDate;
      });
    },
  },
  methods: {
    // 修改仓库数据
    dialogUpdate() {
      let that = this;
      // 校验
      this.$refs.dialogFrom.validate((valid) => {
        if (valid) {
          this.formDate.icon =
            this.formDate.productName === "娃哈哈矿物质水"
              ? this.images[0]
              : this.formDate.productName === "水中贵族"
              ? this.images[1]
              : this.images[2];
          that.$emit("updateList", JSON.stringify(that.formDate));
          // 关闭弹窗
          that.dialogVisible = false;
        } else {
          return false;
        }
      });
    },
    // 新增
    dialogAdd() {
      let that = this;
      // 校验
      this.$refs.dialogFrom.validate((valid) => {
        if (valid) {
          // 将数据传递至父组件
          this.formDate.icon =
            this.formDate.productName === "娃哈哈矿物质水"
              ? this.images[0]
              : this.formDate.productName === "水中贵族"
              ? this.images[1]
              : this.images[2];
          console.log(this.formDate);
          that.$emit("addList", JSON.stringify(that.formDate));
          // 关闭弹窗
          that.offDialog();
        } else {
          return false;
        }
      });
    },

    // 结束清空弹窗数据，关闭弹窗
    offDialog() {
      // 回复初始值
      this.$refs.dialogFrom.resetFields();
      // 关闭弹窗
      this.dialogVisible = false;
    },

    // 开启弹窗，判断是新增还是修改事件
    showDialog(type) {
      // 判断是新增还是修改,1 表示新增，2 表示修改
      this.type = type;
      // 开启弹窗
      this.dialogVisible = true;
    },
  },
};
</script>
<style scoped>
.product_img {
  margin-top: 7px;
  width: 80px;
  height: 80px;
}

.dialog_input {
  width: 160px;
}

/deep/ .el-dialog__body,
/deep/ .el-dialog--center .el-dialog__body {
  padding: 0;
}

/deep/ .el-dialog__header {
  padding: 0;
}
</style>
